<template>
	<view class="pages">
		<view class="search_warp">
			<view class="search u-flex-y-center u-flex-between">
				<view class="u-flex-y-center">
					<view class="search_img">
						<image :src="`${$http_cos}/static/search.png`"></image>
					</view>
					<input type="text" v-model="formData.id" placeholder="输入编号和名称" @blur="onSearch" @keyup.enter.native="$event.target.blur()"/>
				</view>
				<view class="search_btn" @keyup.enter.native="onSearch">
					<text>搜索</text>
				</view>
			</view>
			<view class="collapse u-flex-around u-flex-y-center">
				<template v-for="item in collapselist">
					<yy-choosecade v-model="formData[item.fieldName]" @change_list="submit" :config="item"></yy-choosecade>
				</template>
				<!-- <view class="collapse_item u-flex-y-center" v-for="(item,index) in collapselist" :key="index" @click="">
					<text>{{item.title}}</text>
					<view class="arrow-icon" :class="">
						<image src="/static/down.png"></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="list">
			<view class="item  " v-for="(item,index) in proData" :key="index">
				<view class="u-flex u-flex-between item_mian">
					<view class="avatar" @click="skip(item)">
						<!-- <u-image :src="get_src(item.matchmakerMeitu)" :lazy-load="true"></u-image> -->
						<!-- <image :src="get_src(item.matchmakerMeitu)" mode="center"></image> -->
						<u--image :src="get_src(item.matchmakerMeitu)" height="232" width="184" >
						</u--image>
					</view>
					
					<view class="u-flex-1 u-flex-column  u-flex-between" style="margin-left:24rpx;overflow: hidden;">
						<view class="u-flex  item_top">
							<text>{{item.userId}}@{{item.matchmakerUid}}</text>
							<text>-{{item.maritalStatus}}-</text>
							<text v-if="item.status==0">全部</text>
							<text v-if="item.status==1">在册</text>
							<text v-if="item.status==2">不在册</text>
							<!-- <text class="line"></text> -->
							<!-- <text class="line"></text> -->
							
						</view>
						<view class="info_introduce">
							<text>{{item.memeberName==null?'会员已过期':item.memeberName}}:</text>
							<text v-if="item.memberType==1">
								永久
							</text>
							<text v-else>
								{{item.startTime}}-{{item.endTime}}
							</text>
						</view>
						<view class="u-flex-y-center u-flex-between  btn_warp" >
							<view class="btn1 change_state u-flex-xy-center" @click="change_state(item)">
								<text>更改状态</text>
							</view>
							<view class="btn1 agree u-flex-xy-center" @click="chang_authority(item)">
								<text>更改权限</text>
							</view>
							<u-switch v-model="item.inquiryStatus==2?true:false" size="45" activeColor="#FF7612" asyncChange @change="asyncChange($event,item)"></u-switch>
						</view>
					</view>
					
				</view>
				<view class="u-flex u-flex-between item_botton">
					<text class="usable">可用积分:{{item.integral}}</text>
					<view class="u-flex item_botton_right">
						<text @click="skip_integral(item)">积分明细</text>
						<view class="line"></view>
						<text @click="change_integral('增加',item)">增加</text>
						<view class="line"></view>
						<text @click="change_integral('扣除',item)">扣除</text>
					</view>
				</view>
			</view>
		</view>
			
		<u-popup :show="gui_window" @close="gui_window=false" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center"
			round="20">
			<view class="gui_windows">
				<view class="title">
					<text>询问结果</text>
				</view>
				<view class="windows_item u-flex-x-center" @click="is_intention=index"
					:class="is_intention==index?'is_intention':''" v-for="(item,index) in intention_list" :key="index">
					<text>{{item.name}}</text>
				</view>
				<view class="u-flex-between u-flex btn_warp">
					<view class="u-flex-xy-center btn cancel" @click="gui_window=false">
						<text>取消</text>
					</view>
					<view class="u-flex-xy-center btn config" @click="gui_window=false;confirm()">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="integra_window" @close="gui_window=false" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center"
			round="20">
			<view class="gui_windows">
				<view class="title">
					<text>积分{{name}}</text>
				</view>
				<view class="u-flex integra_input">
					<text>{{name}}</text>
					<input  type="number" v-model="integral" placeholder-style="text-align:left;"/>
				</view>
				<view class="u-flex-between u-flex btn_warp" style="padding:0 0 45rpx;box-sizing: border-box;">
					<view class="u-flex-xy-center btn cancel" @click="integra_window=false">
						<text>取消</text>
					</view>
					<view class="u-flex-xy-center btn config" @click="integra_window=false;confirm_integra()">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
		<yy-authority ref="child" @change_time="change_time" v-model="changeData"></yy-authority>
		<show-modal></show-modal>
	</view>
</template>

<script>
	import {
		getUserList,
		getMatchList,
		getMemberList,
		setMember,
		setStatus,
		setInquiryStatus,
		setIntegral
	} from '@/common/api.js';

	export default {
		data() {
			return {
				name:'',
				endTime:"",
				gui_window:false,
				is_intention:0,
				safeAreaInsetBottom:false,
				intention_list:[{name:'在册',id:1},{name:'不在册',id:2}],
				collapselist: [{
					title: '全部',
					label: '红娘id',
					value: '',
					array: [],
					fieldName: 'matchmakerUid',
					defaultIndex: [0]
				}, {
					title: '全部会员',
					label: '会员等级',
					array: [],
					value: '',
					defaultIndex: [0],
					fieldName: 'memberId',
				},{
					title: '全部婚烟',
					label: '婚烟状态',
					value: '',
					array: [{name:'全部',id:''},{name:'未婚',id:'未婚'},{name:'离异未育',id:'离异未育'},{name:'离异未育(不公开)',id:'离异未育(不公开)'},{name:'离异带孩',id:'离异带孩'},{name:'离异带孩(不公开)',id:'离异带孩(不公开)'},{name:'离异不带孩',id:'离异不带孩'},{name:'离异不带孩(不公开)',id:"离异不带孩(不公开)"},{name:'丧偶',id:'丧偶'}],
					fieldName: 'maritalStatus',
					defaultIndex: [0]
				}, {
					title: '全部状态',
					label: '会员状态',
					array: [{name:'全部',id:0},{name:'在册',id:1},{name:'不在册',id:2}],
					value: '',
					defaultIndex: [0],
					fieldName: 'status',
				}],
				proData:[],
				count:0,
				changeData:{},
				integra_window:false,
				formData:{
					memberId:0,
					page:1,
					matchmakerUid:0,
					perPage:10,
					status:0,
					maritalStatus:0,
					id:''
				},
				current_item:{
					userId:'',
					integral:'',
					type:0
				},
				integral:''
			}
		},
		async onLoad() {
			let list1 = this.collapselist[1]
			let list = this.collapselist[0]
			let arr = {
				'id': '全部',
				'name': '全部',
				days: ''
			}
			let get_MemberList = await this.get_MemberList()
			get_MemberList.unshift(arr)
			list1.array = get_MemberList
			list1.title = '全部'
		
			this.formData.memberId = get_MemberList[0].id == '全部' ? 0 : get_MemberList[0].id
			let get_MatchList = await this.get_MatchList()
			list.title = 'id:' + '全部'
			get_MatchList.unshift(arr)
			this.formData.matchmakerUid = get_MatchList[0].id == '全部' ? 0 : get_MatchList[0].id
		
			list.array = get_MatchList.map(item => {
				return {
					name: item.id,
					id: item.id
				}
			})
			this.$nextTick(() => {
				this.get_UserList()
			})
		},
		watch: {
			formData: {
				handler(value) {
		
				},
				deep: true // 深度监听
			},
			integral(val){
				this.current_item.integral=val
			}
		},
		onReachBottom() {
			
			this.get_UserList()
		},
		methods: {
			skip_integral(item){
				
				uni.navigateTo({
					url:'/pagesA/integral_detail/index?userId='+item.userId
				})
			},
			confirm_integra(){
				this.set_Integral()
			},
			set_Integral(){
				
				let data=this.current_item
				
					setIntegral(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						// this.num_id=''
						this.current_item={
							userId:'',
							integral:'',
							type:0
						},
						this.integral=''
						uni.$u.toast(this.name+this.current_item.integral+'积分成功')
						this.init()
					}).catch((err) => {
						
					})
			},
			change_integral(name,item){
				this.name=name
				this.integra_window=true
				// this.integral=item.integral
				this.current_item={
					userId:item.userId,
					integral:item.integral,
					type:name=='增加'?1:2
				}
			},
			skip(item){
				uni.navigateTo({
					url:'/pagesA/square_details/index?id='+item.userId
				})
			},
			onSearch(){
				this.init()
			},
			asyncChange(e,item){
				let that=this
				 this.$showModal({
				  	title:'',
					content: e?'确定要不限制吗？':'确定要限制吗？',
				  	cancelText:"取消",
				  	confirmText:"确定",
				  	success(res) {
				  		if (res.confirm) {
				  		  let data={
				  		  	userId:item.userId,
				  		  	inquiryStatus:e?2:1
				  		  }
				  		  setInquiryStatus(data, {
				  		  	custom: {
				  		  		auth: false,
				  		  		toast: false,
				  		  		catch: false
				  		  	}
				  		  }).then((result) => {
							  
				  		  	that.init()
				  		  }).catch((err) => {
				  		  
				  		  })
				  		} else if (res.cancel) {
				  		  console.log('用户点击取消')
				  		}			
				  	}
				  })
				
			},
			confirm(){
				if(this.changeData.status==this.intention_list[this.is_intention].id)return
				let data={
					userId:this.changeData.userId,
					status:this.intention_list[this.is_intention].id
				}
				setStatus(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.init()
				}).catch((err) => {

				})
			},
			change_state(item){
				this.changeData=item
				this.gui_window=true
				if(item.status==1){
					this.is_intention=0
				}else if(item.status==2){
					this.is_intention=1
				}
			},
			change_time(item){
				if(item.days==this.changeData.endTime&&this.changeData.memeberName==item.name)return
				// this.changeData.endTime=item.days
				let data={
					userId:this.changeData.userId,
					memberId:item.id,
					startTime:this.changeData.startTime,
					endTime:item.days,
					integral:item.integral
				}
				setMember(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.init()
					this.$refs.child.close()
				}).catch((err) => {

				})
			},
			chang_authority(item){
				console.log(item)
				// item.integral=''
				this.changeData=item
				
				this.$refs.child.open()
			},
			submit(val) {
				let {
					name,
					obj
				} = val
				this.collapselist = this.collapselist.map(item => {
					if (item.fieldName == obj.fieldName) {
						if (item.fieldName == 'matchmakerUid') {
							item.title = 'id:' + name
							
						} else {
							item.title = name
						}
			
					}
					return item
				})
				this.init()
			},
			init(){
				this.formData.page=1
				this.proData=[]
				this.count =0
				setTimeout(()=>{
						this.get_UserList()
				},200)
			},
			get_MemberList() {
				return new Promise(resolve => {
					getMemberList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
			
				})
			},
			get_MatchList() {
				return new Promise(resolve => {
					getMatchList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
			
				})
			},
			get_src(it){
				let {url}=JSON.parse(it)[0]
					// return url+'?watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTEwMDAwMDQucGljc2gubXlxY2xvdWQuY29tL3NodWl5aW4uanBn/gravity/northwest'
				return url+'?imageView2/2/w/750/h/q/85'
			},
			get_UserList() {
				let data = {
					params:this.formData

				}
				getUserList(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.proData = [...this.proData, ...result.list]
					this.count = result.count
					// result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
					this.formData.page++;
				}).catch((err) => {

				})
			}

		}
	}
</script>

<style lang="scss">
	.pages {

		.search_warp {
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			height: 170rpx;
			background-color: #fff;
			.search {
				position: relative;
				height: 72rpx;
				width: 100%;
				background: #F9F9F9;
				border-radius: 36rpx;
				padding: 0 30rpx 0 32rpx;
				box-sizing: border-box;

				.search_img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				input {
					font-size: 28rpx;
					color: #C9C9C9;
				}

				.search_btn {
					padding: 0 24rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 2rpx;
						height: 100%;
						background: #E5E5E5;
						-webkit-transform: scaleX(.5);
						transform: scaleX(.5);
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #111111;
					}
				}
			}
		}

		.collapse {
			margin-top: 10rpx;

			.collapse_item {
				padding: 12rpx;
				box-sizing: border-box;

				text {
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-icon {
					width: 20rpx;
					height: 12rpx;
					margin-left: 27rpx;
				}
			}
		}

		.list {
			padding:20rpx;
			box-sizing: border-box;

			.item {
				padding: 0rpx 20rpx 0rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 16rpx;
				.item_mian{
					padding:24rpx 0;
					box-sizing: border-box;
					position: relative;
					border-bottom: 1rpx solid #EEEEEE;
					
				}
				.item_botton{
					padding: 23rpx 0 24rpx;
					box-sizing: border-box;
					.usable{
						color: #919090;
						font-size: 28rpx;
					}
					.item_botton_right{
						text{
							font-size: 28rpx;
							text-decoration:underline;
							display: block;
							&:last-child{
								margin-right:19rpx;
							}
						}
					}
					
					.line{
						width: 2rpx;
						height: 100%;
						background-color: #EEEEEE;
						margin:0 40rpx 0 39rpx;
					}
				}
				.avatar {
					width: 160rpx;
					height: 200rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				.item_top {
					padding: 9rpx 0 0;
					box-sizing: border-box;
					align-items: center;
					text {
						font-weight: 400;
						font-size:28rpx;
					}
					.line {
						width: 2rpx;
						height: 100%;
						margin: 0 20rpx;
						box-sizing: border-box;
						background: #D2D2D2;
						-webkit-transform: scaleX(.5);
						transform: scaleX(.5);
					}

					.sex {
						width: auto;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}

				.btn_warp {
					// padding: 0 11rpx;
					// box-sizing: border-box;

					.btn1 {
						width: 168rpx;
						height: 72rpx;
						border-radius: 20rpx;
						text-align: center;
						line-height: 72rpx;

						text {
							font-size: 30rpx;
						}

						&.change_state {
							margin-right: 23rpx;
							border: 2rpx solid #E5E5E5;
						}
					}
				}

				.info_introduce {
					text {
						font-size: 26rpx;
						font-weight: 400;
						color: #111111;
					}
				}
			}
		}
		
		.gui_windows {
			width: 600rpx;
			height: auto;
			padding: 0 36rpx 0rpx;
			text-align: center;
			.integra_input{
				justify-content: center;
				align-items: center;
				
				margin-bottom: 51rpx;
				text{
					font-size: 28rpx;
					color: #111111;
					white-space: nowrap;
				}
				input{
					width: 454rpx;
					 margin-left: 26rpx;
					 background: #FFFFFF;
					 border: 2rpx solid #C2C2C2;
					 border-radius: 20rpx;
					 text-align: left;
					 height:88rpx;
					 padding:0 33rpx;
				}
			}
			.title {
				padding: 55rpx 0 48rpx;
				box-sizing: border-box;
		
				text {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
				}
			}
		
			.windows_item {
				height: 98rpx;
				background: #FFFFFF;
				border: 2rpx solid #D9D9D9;
				border-radius: 20rpx;
				align-items: center;
				margin-bottom: 24rpx;
		
				text {
					font-size: 30rpx;
					color: #111111;
				}
		
				&.is_intention {
		
					border: 2rpx solid #FF7612;
		
					text {
						color: #FF7612;
					}
				}
			}
		
			.btn_warp {
				padding: 20rpx 0;
				box-sizing: border-box;
		
				.btn {
					width: 277rpx;
					height: 90rpx;
					border-radius: 45rpx;
		
					// padding:20rpx 0;
					text {
						font-size: 30rpx;
					}
		
					&.cancel {
						background-color: #F6F6F6;
		
						text {
							color: #111111;
						}
					}
		
					&.config {
						background-color: #FF7612;
		
						text {
							color: #FFFFFF;
						}
					}
				}
			}
		
		}
		

	}
</style>
